<!DOCTYPE html>
<html>
<head>
	<title>EaselJS: Sprite Sheet Example</title>
	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
</head>

<body onload="init();">
<header class="EaselJS">
	<h1>Sprite Sheets</h1>

	<p>An example of the <code>SpriteSheetLoader</code>, which automatically parses loaded JSON, and will internally preload
	associated images and instantiate a <code>SpriteSheet</code> instance before the <code>complete</code> event is fired.</p>
	<p>Some browsers can not load images or access pixel data when running local files, and may throw a security
		error or not work unless the content is running on a server.</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>

<script src="../_assets/libs/easeljs-NEXT.min.js"></script>
<script type="text/javascript" src="../lib/preloadjs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
	 http://code.createjs.com -->

<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script type="text/javascript" id="editable">
	var assets;
	var stage;
	var w, h;
	var sky, grant, ground, hill, hill2;
	var runningRate, isInWarp, isStationary;
	var stationaryPosition, isPassed, spriteSheet;

	function init() {
		examples.showDistractor();

		var canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		runningRate = 2.5;
		isInWarp = false;
		isStationary = false;
		stationaryPosition = 300;
		isPassed = false;

		// grab canvas width and height for later calculations:
		w = canvas.width;
		h = canvas.height;

		assets = [];

		manifest = [
			{src: "art/sky.png", id: "sky"},
			{src: "art/ground.png", id: "ground"},
			{src: "art/hill2.png", id: "hill2"},
			{src: "art/hill1.png", id: "hill"},
			{src: "static/grant.json", id:"grant", type:"spritesheet", crossOrigin:true}
		];

		var loader = new createjs.LoadQueue(true, "../_assets/");
		loader.on("fileload", handleFileLoad);
		loader.on("complete", handleComplete);
		loader.loadManifest(manifest);
		stage.autoClear = false;
	}

	function handleFileLoad(event) {
		assets.push(event);
	}

	function handleComplete() {
		for (var i = 0; i < assets.length; i++) {
			var event = assets[i];
			var id = event.item.id;
			var result = event.result;

			switch (id) {
				case "sky":
					sky = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 0, w, h));
					break;
				case "ground":
					ground = new createjs.Shape();
					var g = ground.graphics;
					g.f("#f00");
					g.beginBitmapFill(result);
					g.drawRect(0, 0, w + 330, 79);
					ground.y = h - 79;
					break;
				case "hill":
					// Vertically offset the pattern fill by 1 to solve a Chrome bug on BitmapFills
					hill = new createjs.Shape(new createjs.Graphics().f("#f00").beginBitmapFill(result).drawRect(0, 1, 282, 60));
					hill.x = Math.random() * w | 0;
					hill.scaleX = hill.scaleY = 3;
					hill.y = 144;
					break;
				case "hill2":
					hill2 = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 1, 212, 51));
					hill2.x = Math.random() * w | 0;
					hill2.scaleX = hill2.scaleY = 3;
					hill2.y = 171;
					break;
				case "grant":
					var spriteSheet = result;
					spriteSheet.getAnimation("run").next = "run";
					spriteSheet.getAnimation("jump").next = "run";

					grant = new createjs.Sprite(spriteSheet, "run")
							.set({x: -200, y:40, scaleX:0.8, scaleY:0.8});
			}
		}

		examples.hideDistractor();

		if (grant == null) {
			console.error("Can not play. Grant sprite was not loaded.");
			return;
		}

		stage.addChild(sky, hill, hill2, ground, grant);
		stage.on("mousedown", handleJumpStart);

		createjs.Ticker.setFPS(40);
		createjs.Ticker.on("tick", tick);
	}

	function handleJumpStart() {
		grant.gotoAndPlay("jump");
	}

	function tick() {
		var outside = w + 20;
		var position = grant.x + runningRate;
		grant.x = (position >= outside) ? -200 : position;

		ground.x = (ground.x - 15) % 330;
		hill.x = (hill.x - 0.8);
		if (hill.x + 838 <= 0) {
			hill.x = outside;
		}
		hill2.x = (hill2.x - 1.2);
		if (hill2.x + 633 <= 0) {
			hill2.x = outside;
		}

		stage.update();
	}
</script>
</body>
</html>
